<script setup>
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router"

import AddressCard from '@/components/AddressCard.vue';
import router from '@/router/index.js';
import useUserListStore from "@/stores/user/User.js";


const route = useRoute();
const useUserList = useUserListStore();
const { userList } = storeToRefs(useUserList);

// 当前用户的地址数组
const curUser = userList.value.find(item => { return item.name == "zhangsan" });
const { addressList } =curUser;

/*     onBeforeRouteUpdate((to,from)=>{
        // console.log(11);
        // console.log("to:",to);
        // console.log("from:",from); 
    })
    onBeforeRouteLeave((to,from)=>{
        console.log(11);
        console.log("to:",to);
        console.log("from:",from); 
    }) */

// 选择地址
const addressChecked = (i) => {
    //如果是orderConfirm发来的页面请求    //&& i!==2
    if (route.params.from === "orderConfirm") {

// if (route.query.index !== undefined) {
    // let 不能在if里又突然定义响应式对象
    curUser.currentAddress = addressList[i];
// }
// console.log(currentAddress);



        router.replace({
            name: "OrderConfirm",                   //undefined
            query: { shopName: route.query.shopName, index: i, id: route.query.id },
        })
    }else if(route.params.from){
        router.push({
            name: "CreateAddress",
            params: { from: route.params.from },
            query: { index: i }
        })
    }
    /*         else{
                router.back();
            } */
    /*         else{
                router.push({
                path:"/OrderConfirm",            
                query:{shopName:route.query.shopName,index:undefined}
            })
            } */

}


const createAdd = () => {
    if (route.params.from === "orderConfirm") {
        router.push({
            name: "CreateAddress",
            params: { from: route.params.from },
            query: { shopName: route.query.shopName, id: route.query.id }
        })
    }else if(route.params.from==="my"){
        router.push({
            name: "CreateAddress",
            params: { from: route.params.from }
        })
    }

}

const back = () => {
    if (route.params.from === "orderConfirm") {
        router.replace({
            path: "/OrderConfirm",
            query: { shopName: route.query.shopName, id: route.query.id }

        })
    } else if (route.params.from === "my") {
        router.replace({
            path: "/my"

        })
    }

}

</script>

<!-- <script>
import {defineComponent} from "vue";
export default defineComponent({
    beforeRouteEnter(to,from,next){
        console.log("to:",to);
        console.log("from:",from);
        console.log(222);
        console.log("addressList");
        // console.log(vm.addressList);
        next(vm =>{
            console.log(vm.addressList);
            
        });
    }
})

// import router from './router/index.js';
// router.beforeEach((to,from,next)=>{
//         console.log("to:",to);
//         let A  = to.fullPath;
//         if (to.fullPath.split("?")[0] =) {
          
//         }
//         console.log(to.fullPath.split("?")[0]);
//         console.log("from:",from);
//         next()
//     }
// )
</script> -->
<template>
    <div class="address_list">
        <div class="address_list_header">
            <span class="iconfont title_back" @click="back()">&#xe697;</span>
            <div class="title_text">收货地址</div>
            <div class="create" @click="createAdd">新建</div>
        </div>
        <div class="address_list_content">
            <div class="address_list_content_item" v-for="AddressItem, i in addressList" :key="AddressItem.name">
                <AddressCard :SingleAddress="AddressItem" @click="addressChecked(i)" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.address_list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
    }

    &_content {
        margin-top: .58rem;
    }
}
</style>